<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OmniMonitor - SQL溯源</title>
    <!-- 引入Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.9/dist/index.css">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
    <!-- 引入Element Plus JS -->
    <script src="https://unpkg.com/element-plus@2.3.9/dist/index.full.js"></script>
</head>
<body>
    <div id="app" class="el-container" style="min-height: 100vh; flex-direction: column;">
        <!-- 顶部导航栏 -->
        <el-header style="background-color: #fff; border-bottom: 1px solid #eaecef; padding: 0 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
                <div style="display: flex; align-items: center;">
                    <i class="fa fa-line-chart" style="font-size: 24px; color: #409eff; margin-right: 10px;"></i>
                    <h1 style="font-size: 18px; margin: 0; color: #303133;">OmniMonitor 全维度监控系统</h1>
                </div>
                <el-menu mode="horizontal" :default-active="activeMenu" style="border-bottom: none;">
                    <el-menu-item index="/monitor/dashboard">
                        <i class="fa fa-dashboard" style="margin-right: 5px;"></i>仪表盘
                    </el-menu-item>
                    <el-menu-item index="/monitor/jvm">
                        <i class="fa fa-microchip" style="margin-right: 5px;"></i>JVM监控
                    </el-menu-item>
                    <el-menu-item index="/monitor/threadpool">
                        <i class="fa fa-tasks" style="margin-right: 5px;"></i>线程池监控
                    </el-menu-item>
                    <el-menu-item index="/monitor/sql">
                        <i class="fa fa-database" style="margin-right: 5px;"></i>SQL溯源
                    </el-menu-item>
                </el-menu>
            </div>
        </el-header>

        <!-- 主内容区 -->
        <el-main style="flex: 1; padding: 20px;">
            <!-- 空SQL溯源内容，待实现 -->
            <el-card shadow="always">
                <div slot="header">
                    <span>SQL执行溯源</span>
                </div>
                <div style="text-align: center; padding: 50px 0;">
                    <el-empty description="SQL溯源数据加载中..."></el-empty>
                </div>
            </el-card>
        </el-main>

        <!-- 页脚 -->
        <el-footer style="text-align: center; padding: 15px; font-size: 12px; color: #606266; border-top: 1px solid #eaecef;">
            OmniMonitor 全维度监控系统 © 2023
        </el-footer>
    </div>

    <script>
        const { createApp, ref, onMounted, reactive, toRefs } = Vue;
        const app = createApp({
            setup() {
                const state = reactive({
                    activeMenu: '/monitor/sql'
                });

                onMounted(() => {
                    console.log('SQL溯源页面加载完成');
                });

                return {
                    ...toRefs(state)
                };
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
